<template>
  <div>
    <!-- 三级联动选择框 -->
    <Category @send-id="getID" :scene="scene" />
    <el-card shadow="hover">
      <!-- 展示SPU列表 -->
      <div v-show="scene === 0">
        <el-button
          type="primary"
          icon="Plus"
          :disabled="!c3Id"
          @click="addSpu"
          v-has="`btn.Spu.add`"
        >
          添加SPU
        </el-button>
        <el-table :data="records" stripe border style="margin: 10px 0">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="spuName" label="SPU名称" width="120" />
          <el-table-column prop="description" label="SPU描述" />
          <el-table-column label="操作" width="220">
            <template #default="{ row }">
              <el-button
                type="primary"
                icon="Plus"
                size="small"
                title="添加SKU"
                @click="addSku(row)"
                v-has="`btn.Spu.addsku`"
              ></el-button>
              <el-button
                type="warning"
                icon="Edit"
                size="small"
                title="修改SPU"
                @click="updateSpu(row)"
                v-has="`btn.Spu.update`"
              ></el-button>
              <el-button
                type="success"
                icon="View"
                size="small"
                title="查看SKU列表"
                @click="findSku(row)"
                v-has="`btn.Spu.skus`"
              ></el-button>
              <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                confirm-button-type="danger"
                icon="WarningFilled"
                icon-color="orange"
                :title="`你真的要删除${row.spuName}吗?`"
                @confirm="deleteSpu(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    icon="Delete"
                    size="small"
                    title="删除SPU"
                    v-has="`btn.Spu.delete`"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <!-- 表格内无数据时展示一张图片 -->
          <template #empty>
            <img src="@/assets/images/empty.png" width="250px" alt="empty" />
          </template>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[3, 6, 9]"
          background
          layout=" prev, pager, next, jumper, -> ,sizes ,total"
          small
          :total="spuTotal"
          @current-change="getHasSpu()"
          @size-change="getHasSpu(1)"
          :disabled="!records.length"
        />
      </div>
      <!-- 展示添加/修改SPU页面 -->
      <SpuForm
        v-show="scene === 1"
        ref="spuFormRef"
        @change-scene="changeScene"
      />
      <!-- 展示添加SKU页面 -->
      <SkuForm
        v-show="scene === 2"
        ref="skuFormRef"
        @change-scene="changeScene"
      />
      <!-- 查看SKU列表对话框 -->
      <el-dialog v-model="show">
        <template #header>
          <div style="font-size: 18px; font-weight: bold; color: grey">
            SKU销售列表
          </div>
        </template>
        <el-table :data="skuArr" border stripe>
          <el-table-column label="SKU名称" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格" prop="price"></el-table-column>
          <el-table-column label="SKU重量" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
            <template #default="{ row }">
              <img
                :src="row.skuDefaultImg"
                style="width: 100%"
                alt="商品图片"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Spu">
import { reqHasSpu, reqRemoveSpu, reqSkuList } from '@/api/product/spu'
import { Records, SkuData, SpuData } from '@/api/product/spu/type'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
// 引入子组件
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'

// 存储Category组件传递的三级分类的id
let c1Id = ref<number>()
let c2Id = ref<number>()
let c3Id = ref<number>()
// 定义一个变量用于切换展示SPU列表/修改添加SPU/添加SKU场景
let scene = ref<number>(0) // 0:显示SPU列表 1:添加/修改SPU 2:添加SKU
// 存储当前页码
let pageNo = ref<number>(1)
// 存储每页的条数
let pageSize = ref<number>(6)
// 存储获取SPU数据接口返回的数据
let records = ref<Records>([])
// 存储一共有多少条SPU的数据
let spuTotal = ref<number>(0)
// 获取子组件SpuForm实例对象
let spuFormRef = ref()
// 获取子组件SkuForm实例对象
let skuFormRef = ref()
// 存储全部的SKU的数据
let skuArr = ref<SkuData[]>([])
// 控制dialog的显示与隐藏
let show = ref(false)

// 自定义事件用于获取Category组件中选中的三级分类id
const getID = (c1id: number, c2id: number, c3id: number) => {
  // 存储三级分类id
  c1Id.value = c1id
  c2Id.value = c2id
  c3Id.value = c3id
  if (c3Id.value) {
    // 当三级分类id不为空时，发送请求获取SPU数据
    getHasSpu()
  } else {
    // 当传递过来的数据中三级分类id为空时,清空原有的SPU数据
    records.value = []
  }
}
// 发送请求获取三级分类下已有的SPU数据
const getHasSpu = async (pager = pageNo.value) => {
  pageNo.value = pager
  const result = await reqHasSpu(
    pageNo.value,
    pageSize.value,
    c3Id.value as number,
  )
  if (result.code === 200) {
    // 存储SPU的数据
    records.value = result.data.records
    // 存储SPU的总数
    spuTotal.value = result.data.total
  } else {
    ElMessage.error('获取失败')
  }
}
// 子组件SpuForm绑定的自定义事件:目前是让子组件通知父组件切换场景为0
const changeScene = (obj: any) => {
  // 子组件SpuForm点击取消变为场景0:展示SPU列表
  scene.value = obj.flag
  // 如果是添加则刷新SPU列表留在当前页,添加返回第一页
  obj.params == 'update' ? getHasSpu() : getHasSpu(1)
}
// 点击添加SPU按钮的回调
const addSpu = () => {
  // 切换为场景1：添加与修改已有SPU结构
  scene.value = 1
  // 调用子组件实例的方法  当前传递三级分类id
  spuFormRef.value.initHasSpuData({
    id: null,
    spuName: '', // spu名称
    description: '', // spu描述
    category3Id: c3Id.value, // spu的三级分类id
    tmId: null, // spu的品牌id
    spuSaleAttrList: [], // spu销售属性列表
    spuImageList: [], // spu图片列表
  })
}
// 点击修改SPU按钮的回调
const updateSpu = (row: SpuData) => {
  // 切换为场景1：添加与修改已有SPU结构
  scene.value = 1
  // row为当前行的SPU数据
  // 调用子组件实例的方法将row传递给子组件，并通知子组件获取照片墙数据和属性列表
  spuFormRef.value.initHasSpuData(row)
}
// 点击添加SKU按钮的回调
const addSku = (row: SpuData) => {
  // 切换为场景2：添加SKU结构
  scene.value = 2
  // 调用skuForm组件中的初始化方法获取数据并传递当前spu的id,和一二三级分类id
  // row为当前行的SPU数据(spu中存在三级分类id)
  skuFormRef.value.initSkuData(row, c1Id.value, c2Id.value)
}
// 点击查看SKU按钮的回调
const findSku = async (row: SpuData) => {
  // 发请求获取SKU的数据
  const result = await reqSkuList(row.id as number)
  if (result.code == 200) {
    // 存储获取到的SKU的数据
    skuArr.value = result.data
    // 展示SKU列表对话框
    show.value = true
  } else {
    ElMessage.error('出错了！')
  }
}
// 点击删除SPU按钮的回调
const deleteSpu = async (row: SpuData) => {
  // 发请求删除
  const result = await reqRemoveSpu(row.id as number)
  if (result.code == 200) {
    ElMessage.success('删除成功！')
    // 重新获取SPU数据
    getHasSpu()
  } else {
    ElMessage.error('删除失败！')
  }
}
</script>

<style scoped></style>
